<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>业务员列表</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="__CSS__/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="__CSS__/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="__CSS__/animate.min.css" rel="stylesheet">
    <link href="__CSS__/plugins/zTree/zTreeStyle.css" rel="stylesheet">
    <link href="__CSS__/style.min.css?v=4.1.0" rel="stylesheet">
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <!-- Panel Other -->
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>业务员树形视图</h5>
            </div>
            <div class="ibox-content">
                <div>
                    <ul id="treeDemo" class="ztree"></ul>
                </div>
            </div>
        </div>
    </div>
    <!-- End Panel Other -->
    </div>
    <script src="__JS__/jquery.min.js?v=2.1.4"></script>
    <script src="__JS__/bootstrap.min.js?v=3.3.6"></script>
    <script src="__JS__/plugins/layer/layer.min.js"></script>
    <script src="__JS__/plugins/zTree/jquery.ztree.all.min.js"></script>
    <script type="text/javascript">
    var zTreeObj;
    // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
    var setting = {
        async: {
            enable: true,
            type: 'post',
            url: "{:url('user/treeViewData')}",
            autoParam: ["id"],
            dataFilter: function(treeId, parentNode, childNodes) {
                // console.log(childNodes);
                $.each(childNodes,function(i,v){
                    if(v.isParent === 'true'){
                
                        v.icon = '/static/admin/images/upUser.png';
                    }else{
                        v.icon = '/static/admin/images/user.png';
                    }
                })
        
                return childNodes;
            },
        },
        callback: {
            onAsyncSuccess: function(event, treeId, treeNode) {
                // console.log(event,treeId,treeNode);
         
            },
            onRightClick: function(event, treeId, treeNode) {
                
                if(treeNode != null){
                    console.log(treeNode);
                    // 获取 id 跳转到个人详情页面
                    var id = treeNode.id;
                    window.location.href="{:url('User/salesmanDetail')}?id="+id;
                }
            }
        },
        data: {
            simpleData: {
                enable: true,
                idKey: 'id',
                pIdKey: 'parentId'
            },
        }
    };
    // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
    var zNodes = [{
            name: "test1",
            icon: '/static/admin/images/upUser.png',
            children: [{
                name: "test1_1",
                icon: '/static/admin/images/user.png',
            }, { name: "test1_2" }]
        },
        {
            name: "test2",
            icon: '/static/admin/images/upUser.png',
            children: [
                { name: "test2_1" }, { name: "test2_2" }
            ]
        }
    ];
    $(document).ready(function() {
        // $.ajax({
        //     type: "GET",
        //     url: "{:url('user/treeViewData')}",
        //     success: function(data) {
        //         var data = $.parseJSON(data);
        //         // var obj = JSON.parse(data);
        //         console.log(data[0]);
        //         // var obj = data.parseJSON();
        //         // console.log(typeof obj);
        //         // console.log(obj);
        //         zTreeObj = $.fn.zTree.init($("#treeDemo"), setting,data);
        //     },
        // });


        zTreeObj = $.fn.zTree.init($("#treeDemo"), setting);
    });
    </script>
</body>

</html>